<template>
  <div class="favorites-page">
    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm">
        <!-- 导航栏容器 -->
        <div class="px-6 pt-6">
          <!-- 小标签 -->
          <div
            class="text-sm text-gray-900 dark:text-gray-100 font-medium mb-4"
          >
            我的收藏
          </div>

          <!-- 分类标签页 -->
          <el-tabs v-model="activeTab" class="favorites-tabs">
            <el-tab-pane label="景点收藏" name="spots">
              <!-- 景点列表 -->
              <div class="spots-grid">
                <div v-for="spot in spotsList" :key="spot.id" class="spot-card">
                  <div class="spot-image">
                    <el-image :src="spot.cover" :alt="spot.name" fit="cover" />
                  </div>
                  <div class="spot-info">
                    <h3 class="spot-name">{{ spot.name }}</h3>
                    <p class="spot-description">{{ spot.description }}</p>
                    <div class="spot-meta">
                      <div class="rating">
                        <el-rate v-model="spot.rating" disabled show-score />
                      </div>
                      <div class="views">
                        <el-icon><View /></el-icon>
                        <span>{{ spot.viewCount }}人去过</span>
                      </div>
                    </div>
                    <div class="spot-actions mt-4">
                      <el-button type="primary" @click="viewSpotDetail(spot)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(spot, 'spot')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>

                <!-- 空状态 -->
                <el-empty v-if="!spotsList.length" description="暂无收藏的景点">
                  <el-button type="primary" @click="$router.push('/spots')">
                    去发现景点
                  </el-button>
                </el-empty>
              </div>

              <!-- 分页 -->
              <div v-if="spotsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="spotsPage"
                  v-model:page-size="spotsPageSize"
                  :total="spotsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSpotsPageSizeChange"
                  @current-change="handleSpotsPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="攻略收藏" name="guides">
              <template #label>
                攻略收藏
                <el-badge
                  v-if="guidesCount"
                  :value="guidesCount"
                  class="ml-2"
                />
              </template>
              <div class="guides-grid">
                <div
                  v-for="guide in guidesList"
                  :key="guide.id"
                  class="guide-card"
                >
                  <div class="guide-image">
                    <el-image
                      :src="guide.cover"
                      :alt="guide.title"
                      fit="cover"
                    />
                  </div>
                  <div class="guide-info">
                    <div class="guide-meta">
                      <el-tag
                        size="small"
                        :type="
                          guide.category === 'spot' ? 'success' : 'warning'
                        "
                      >
                        {{ getCategoryText(guide.category) }}
                      </el-tag>
                      <span class="publish-time">{{
                        formatDate(guide.publishTime)
                      }}</span>
                    </div>
                    <h3 class="guide-title">{{ guide.title }}</h3>
                    <p class="guide-description">{{ guide.description }}</p>
                    <div class="guide-stats">
                      <span class="stat-item">
                        <el-icon><Star /></el-icon>
                        {{ guide.favoriteCount }}
                      </span>
                      <span class="stat-item">
                        <el-icon><ChatDotRound /></el-icon>
                        {{ guide.commentCount }}
                      </span>
                    </div>
                    <div class="guide-actions mt-4">
                      <el-button type="primary" @click="viewGuideDetail(guide)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(guide, 'guide')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!guidesList.length"
                  description="暂无收藏的攻略"
                >
                  <el-button type="primary" @click="$router.push('/guides')">
                    去看看攻略
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="guidesList.length" class="pagination">
                <el-pagination
                  v-model:current-page="guidesPage"
                  v-model:page-size="guidesPageSize"
                  :total="guidesTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleGuidesPageSizeChange"
                  @current-change="handleGuidesPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="文章收藏" name="articles">
              <template #label>
                文章收藏
                <el-badge
                  v-if="articlesCount"
                  :value="articlesCount"
                  class="ml-2"
                />
              </template>
              <div class="articles-grid">
                <div
                  v-for="article in articlesList"
                  :key="article.id"
                  class="article-card"
                >
                  <div class="article-image" v-if="article.cover">
                    <el-image
                      :src="article.cover"
                      :alt="article.title"
                      fit="cover"
                    />
                  </div>
                  <div class="article-info">
                    <div class="article-meta">
                      <el-tag
                        size="small"
                        :type="getArticleTagType(article.category)"
                      >
                        {{ getArticleCategoryText(article.category) }}
                      </el-tag>
                      <span class="publish-time">{{
                        formatDate(article.publishTime)
                      }}</span>
                    </div>
                    <h3 class="article-title">{{ article.title }}</h3>
                    <p class="article-description">{{ article.description }}</p>
                    <div class="article-stats">
                      <span class="stat-item">
                        <el-icon><View /></el-icon>
                        {{ article.viewCount }}
                      </span>
                      <span class="stat-item">
                        <el-icon><Star /></el-icon>
                        {{ article.favoriteCount }}
                      </span>
                      <span class="stat-item">
                        <el-icon><ChatDotRound /></el-icon>
                        {{ article.commentCount }}
                      </span>
                    </div>
                    <div class="article-actions">
                      <el-button
                        type="primary"
                        text
                        @click="viewArticleDetail(article)"
                      >
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        text
                        @click="removeFromFavorites(article, 'article')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!articlesList.length"
                  description="暂无收藏的文章"
                >
                  <el-button type="primary" @click="$router.push('/articles')">
                    去看看文章
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="articlesList.length" class="pagination">
                <el-pagination
                  v-model:current-page="articlesPage"
                  v-model:page-size="articlesPageSize"
                  :total="articlesTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleArticlesPageSizeChange"
                  @current-change="handleArticlesPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="美食收藏" name="foods">
              <template #label>
                美食收藏
                <el-badge v-if="foodsCount" :value="foodsCount" class="ml-2" />
              </template>
              <!-- 美食列表 -->
              <div class="foods-grid">
                <div v-for="food in foodsList" :key="food.id" class="food-card">
                  <div class="food-image">
                    <el-image :src="food.image" :alt="food.name" fit="cover" />
                    <div class="food-actions">
                      <el-button type="primary" @click="viewFoodDetail(food)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(food, 'food')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                  <div class="food-info">
                    <div class="food-meta">
                      <el-tag
                        size="small"
                        :type="food.isRecommended ? 'danger' : ''"
                      >
                        {{ food.isRecommended ? "推荐" : "美食" }}
                      </el-tag>
                      <span class="category">{{ food.category }}</span>
                    </div>
                    <h3 class="food-name">{{ food.name }}</h3>
                    <p class="food-description">{{ food.description }}</p>
                    <div class="food-footer">
                      <div class="food-location">
                        <el-icon><Location /></el-icon>
                        <span>{{ food.location }}</span>
                      </div>
                      <div class="food-stats">
                        <span class="stat-item">
                          <el-icon><View /></el-icon>
                          {{ formatNumber(food.views) }}
                        </span>
                        <span class="stat-item">
                          <el-icon><Star /></el-icon>
                          {{ formatNumber(food.likes) }}
                        </span>
                      </div>
                    </div>
                    <div class="food-actions mt-4">
                      <el-button type="primary" @click="viewFoodDetail(food)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(food, 'food')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>

                <!-- 空状态 -->
                <el-empty v-if="!foodsList.length" description="暂无收藏的美食">
                  <el-button type="primary" @click="$router.push('/food')">
                    去发现美食
                  </el-button>
                </el-empty>
              </div>

              <!-- 分页 -->
              <div v-if="foodsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="foodsPage"
                  v-model:page-size="foodsPageSize"
                  :total="foodsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleFoodsPageSizeChange"
                  @current-change="handleFoodsPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="话题收藏" name="topics">
              <template #label>
                话题收藏
                <el-badge
                  v-if="topicsCount"
                  :value="topicsCount"
                  class="ml-2"
                />
              </template>
              <!-- 话题列表 -->
              <div class="topics-grid">
                <div
                  v-for="topic in topicsList"
                  :key="topic.id"
                  class="topic-card"
                >
                  <div class="topic-image">
                    <el-image
                      :src="topic.cover"
                      :alt="topic.title"
                      fit="cover"
                    />
                  </div>
                  <div class="topic-info">
                    <div class="topic-header">
                      <h3 class="topic-title">
                        {{ topic.title }}
                        <el-tag
                          v-if="topic.isHot"
                          type="danger"
                          size="small"
                          class="ml-2"
                        >
                          热门
                        </el-tag>
                      </h3>
                    </div>
                    <p class="topic-description">{{ topic.description }}</p>
                    <div class="topic-stats">
                      <span class="stat-item">
                        <el-icon><User /></el-icon>
                        {{ topic.participantsCount }} 参与
                      </span>
                      <span class="stat-item">
                        <el-icon><ChatDotRound /></el-icon>
                        {{ topic.postsCount }} 讨论
                      </span>
                    </div>
                    <div class="topic-actions mt-4">
                      <el-button type="primary" @click="viewTopicDetail(topic)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(topic, 'topic')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!topicsList.length"
                  description="暂无收藏的话题"
                >
                  <el-button
                    type="primary"
                    @click="$router.push('/community/topics')"
                  >
                    去看看话题
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="topicsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="topicsPage"
                  v-model:page-size="topicsPageSize"
                  :total="topicsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleTopicsPageSizeChange"
                  @current-change="handleTopicsPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="活动收藏" name="activities">
              <template #label>
                活动收藏
                <el-badge
                  v-if="activitiesCount"
                  :value="activitiesCount"
                  class="ml-2"
                />
              </template>
              <!-- 活动列表 -->
              <div class="activities-grid">
                <div
                  v-for="activity in activitiesList"
                  :key="activity.id"
                  class="activity-card"
                >
                  <div class="activity-image">
                    <el-image
                      :src="activity.cover"
                      :alt="activity.title"
                      fit="cover"
                    />
                    <div class="activity-status">
                      <el-tag
                        :type="getActivityStatusTag(activity.status).type"
                      >
                        {{ getActivityStatusTag(activity.status).text }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="activity-info">
                    <h3 class="activity-title">{{ activity.title }}</h3>
                    <div class="activity-meta">
                      <div class="meta-item">
                        <el-icon><Calendar /></el-icon>
                        <span
                          >{{ formatDate(activity.startTime) }} -
                          {{ formatDate(activity.endTime) }}</span
                        >
                      </div>
                      <div class="meta-item">
                        <el-icon><Location /></el-icon>
                        <span>{{ activity.location }}</span>
                      </div>
                      <div class="meta-item">
                        <el-icon><User /></el-icon>
                        <span
                          >{{ activity.participantsCount }}/{{
                            activity.maxParticipants
                          }}人</span
                        >
                      </div>
                    </div>
                    <div class="activity-tags">
                      <el-tag
                        v-for="tag in activity.tags"
                        :key="tag"
                        size="small"
                        class="mr-2"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                    <div class="activity-price">
                      <span v-if="activity.price > 0"
                        >¥{{ activity.price }}</span
                      >
                      <span v-else class="free">免费</span>
                    </div>
                    <div class="activity-actions">
                      <el-button
                        type="primary"
                        @click="viewActivityDetail(activity)"
                      >
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(activity, 'activity')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!activitiesList.length"
                  description="暂无收藏的活动"
                >
                  <el-button
                    type="primary"
                    @click="$router.push('/activities')"
                  >
                    去看看活动
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="activitiesList.length" class="pagination">
                <el-pagination
                  v-model:current-page="activitiesPage"
                  v-model:page-size="activitiesPageSize"
                  :total="activitiesTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleActivitiesPageSizeChange"
                  @current-change="handleActivitiesPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="动态收藏" name="posts">
              <template #label>
                动态收藏
                <el-badge v-if="postsCount" :value="postsCount" class="ml-2" />
              </template>
              <!-- 动态列表 -->
              <div class="posts-grid">
                <div v-for="post in postsList" :key="post.id" class="post-card">
                  <div class="post-header">
                    <div class="post-author">
                      <el-avatar :size="40" :src="post.author.avatar" />
                      <div class="author-info">
                        <span class="author-name">{{
                          post.author.nickname
                        }}</span>
                        <span class="post-time">{{
                          formatTime(post.publishTime)
                        }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="post-content">
                    <p class="post-text">{{ post.content }}</p>
                    <div v-if="post.images?.length" class="post-images">
                      <el-image
                        v-for="(image, index) in post.images"
                        :key="index"
                        :src="image"
                        fit="cover"
                        :preview-src-list="post.images"
                      />
                    </div>
                  </div>
                  <div class="post-footer">
                    <div class="post-stats mb-4">
                      <span class="stat-item">
                        <el-icon><Star /></el-icon>
                        {{ post.likeCount }} 点赞
                      </span>
                      <span class="stat-item">
                        <el-icon><ChatDotRound /></el-icon>
                        {{ post.commentCount }} 评论
                      </span>
                      <span class="stat-item">
                        <el-icon><Share /></el-icon>
                        {{ post.shareCount }} 分享
                      </span>
                    </div>
                    <div class="post-actions">
                      <el-button type="primary" @click="viewPostDetail(post)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(post, 'post')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty v-if="!postsList.length" description="暂无收藏的动态">
                  <el-button
                    type="primary"
                    @click="$router.push('/community/posts')"
                  >
                    去看看动态
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="postsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="postsPage"
                  v-model:page-size="postsPageSize"
                  :total="postsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handlePostsPageSizeChange"
                  @current-change="handlePostsPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="摄影收藏" name="photos">
              <template #label>
                摄影收藏
                <el-badge
                  v-if="photosCount"
                  :value="photosCount"
                  class="ml-2"
                />
              </template>
              <!-- 摄影列表 -->
              <div class="photos-grid">
                <div
                  v-for="photo in photosList"
                  :key="photo.id"
                  class="photo-card"
                >
                  <div class="photo-image">
                    <el-image
                      :src="photo.imageUrl"
                      :alt="photo.title"
                      fit="cover"
                      :preview-src-list="[photo.imageUrl]"
                    />
                  </div>
                  <div class="photo-info">
                    <div class="photo-header">
                      <h3 class="photo-title">{{ photo.title }}</h3>
                      <div class="photo-author">
                        <el-avatar :size="24" :src="photo.author.avatar" />
                        <span>{{ photo.author.nickname }}</span>
                      </div>
                    </div>
                    <p class="photo-description">{{ photo.description }}</p>
                    <div class="photo-meta">
                      <div class="meta-item">
                        <el-icon><Camera /></el-icon>
                        <span>{{ photo.camera }}</span>
                      </div>
                      <div class="meta-item">
                        <el-icon><Setting /></el-icon>
                        <span>{{ photo.settings }}</span>
                      </div>
                      <div class="meta-item">
                        <el-icon><Location /></el-icon>
                        <span>{{ photo.location }}</span>
                      </div>
                    </div>
                    <div class="photo-stats">
                      <span class="stat-item">
                        <el-icon><Star /></el-icon>
                        {{ photo.likeCount }}
                      </span>
                      <span class="stat-item">
                        <el-icon><ChatDotRound /></el-icon>
                        {{ photo.commentCount }}
                      </span>
                    </div>
                    <div class="photo-actions mt-4">
                      <el-button type="primary" @click="viewPhotoDetail(photo)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(photo, 'photo')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!photosList.length"
                  description="暂无收藏的摄影作品"
                >
                  <el-button
                    type="primary"
                    @click="$router.push('/photography')"
                  >
                    去看看摄影
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="photosList.length" class="pagination">
                <el-pagination
                  v-model:current-page="photosPage"
                  v-model:page-size="photosPageSize"
                  :total="photosTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handlePhotosPageSizeChange"
                  @current-change="handlePhotosPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="商品收藏" name="products">
              <!-- 商品列表 -->
              <div class="products-grid">
                <ProductCard
                  v-for="product in productsList"
                  :key="product.id"
                  :product="product"
                  @favorite="removeFromFavorites($event, 'product')"
                  @add-to-cart="addToCart"
                  @buy-now="buyNow"
                />

                <!-- 空状态 -->
                <el-empty
                  v-if="!productsList.length"
                  description="暂无收藏的商品"
                >
                  <el-button type="primary" @click="$router.push('/shop')">
                    去逛逛商城
                  </el-button>
                </el-empty>
              </div>

              <!-- 分页 -->
              <div v-if="productsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="productsPage"
                  v-model:page-size="productsPageSize"
                  :total="productsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleProductsPageSizeChange"
                  @current-change="handleProductsPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="酒店收藏" name="hotels">
              <template #label>
                酒店收藏
                <el-badge
                  v-if="hotelsCount"
                  :value="hotelsCount"
                  class="ml-2"
                />
              </template>
              <!-- 酒店列表 -->
              <div class="hotels-grid">
                <div
                  v-for="hotel in hotelsList"
                  :key="hotel.id"
                  class="hotel-card"
                >
                  <div class="hotel-image">
                    <el-image
                      :src="hotel.cover"
                      :alt="hotel.name"
                      fit="cover"
                    />
                  </div>
                  <div class="hotel-info">
                    <h3 class="hotel-name">{{ hotel.name }}</h3>
                    <div class="hotel-rating">
                      <el-rate v-model="hotel.rating" disabled />
                    </div>
                    <div class="hotel-location">
                      <el-icon><Location /></el-icon>
                      <span>{{ hotel.location }}</span>
                    </div>
                    <div class="hotel-tags mt-2">
                      <el-tag
                        v-for="tag in hotel.tags"
                        :key="tag"
                        size="small"
                        class="mr-2"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                    <div class="hotel-facilities mt-2">
                      <el-tag
                        v-for="facility in hotel.facilities"
                        :key="facility"
                        type="info"
                        size="small"
                        class="mr-2"
                      >
                        {{ facility }}
                      </el-tag>
                    </div>
                    <div class="hotel-price mt-4">
                      <span class="text-xl font-medium text-primary-600"
                        >¥{{ hotel.price }}</span
                      >
                      <span class="text-sm text-gray-500">起</span>
                    </div>
                    <div class="hotel-actions mt-4">
                      <el-button type="primary" @click="viewHotelDetail(hotel)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(hotel, 'hotel')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!hotelsList.length"
                  description="暂无收藏的酒店"
                >
                  <el-button type="primary" @click="$router.push('/hotels')">
                    去看看酒店
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="hotelsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="hotelsPage"
                  v-model:page-size="hotelsPageSize"
                  :total="hotelsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleHotelsPageSizeChange"
                  @current-change="handleHotelsPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="体验收藏" name="experiences">
              <template #label>
                体验收藏
                <el-badge
                  v-if="experiencesCount"
                  :value="experiencesCount"
                  class="ml-2"
                />
              </template>
              <!-- 体验列表 -->
              <div class="experiences-grid">
                <div
                  v-for="experience in experiencesList"
                  :key="experience.id"
                  class="experience-card"
                >
                  <div class="experience-image">
                    <el-image
                      :src="experience.cover"
                      :alt="experience.title"
                      fit="cover"
                    />
                  </div>
                  <div class="experience-info">
                    <div class="experience-header">
                      <h3 class="experience-title">{{ experience.title }}</h3>
                    </div>
                    <div class="experience-meta">
                      <div class="meta-item">
                        <el-icon><Timer /></el-icon>
                        <span>{{ experience.duration }}</span>
                      </div>
                      <div class="meta-item">
                        <el-icon><Location /></el-icon>
                        <span>{{ experience.location }}</span>
                      </div>
                    </div>
                    <div class="experience-rating">
                      <el-rate v-model="experience.rating" disabled />
                      <span class="booking-count"
                        >已预订 {{ experience.bookingCount }}</span
                      >
                    </div>
                    <div class="experience-tags">
                      <el-tag
                        v-for="tag in experience.tags"
                        :key="tag"
                        size="small"
                        class="mr-2"
                      >
                        {{ tag }}
                      </el-tag>
                    </div>
                    <div class="experience-price">
                      <span class="price-value">¥{{ experience.price }}</span>
                      <span class="price-label">起</span>
                    </div>
                    <div class="experience-actions mt-4">
                      <el-button
                        type="primary"
                        @click="viewExperienceDetail(experience)"
                      >
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(experience, 'experience')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty
                  v-if="!experiencesList.length"
                  description="暂无收藏的体验"
                >
                  <el-button
                    type="primary"
                    @click="$router.push('/experiences')"
                  >
                    去看看体验
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="experiencesList.length" class="pagination">
                <el-pagination
                  v-model:current-page="experiencesPage"
                  v-model:page-size="experiencesPageSize"
                  :total="experiencesTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleExperiencesPageSizeChange"
                  @current-change="handleExperiencesPageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="新闻收藏" name="news">
              <template #label>
                新闻收藏
                <el-badge v-if="newsCount" :value="newsCount" class="ml-2" />
              </template>
              <!-- 新闻列表 -->
              <div class="news-grid">
                <div v-for="news in newsList" :key="news.id" class="news-card">
                  <div class="news-image" v-if="news.cover">
                    <el-image :src="news.cover" :alt="news.title" fit="cover" />
                  </div>
                  <div class="news-info">
                    <div class="news-meta">
                      <el-tag size="small">{{ news.category }}</el-tag>
                      <span class="text-sm text-gray-500">{{
                        formatTime(news.publishTime)
                      }}</span>
                    </div>
                    <h3 class="news-title">{{ news.title }}</h3>
                    <p class="news-summary">{{ news.summary }}</p>
                    <div class="news-stats">
                      <span class="stat-item">
                        <el-icon><View /></el-icon>
                        {{ formatNumber(news.viewCount) }}
                      </span>
                    </div>
                    <div class="news-actions mt-4">
                      <el-button type="primary" @click="viewNewsDetail(news)">
                        查看详情
                      </el-button>
                      <el-button
                        type="danger"
                        @click="removeFromFavorites(news, 'news')"
                      >
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
                <!-- 空状态 -->
                <el-empty v-if="!newsList.length" description="暂无收藏的新闻">
                  <el-button type="primary" @click="$router.push('/news')">
                    去看看新闻
                  </el-button>
                </el-empty>
              </div>
              <!-- 分页 -->
              <div v-if="newsList.length" class="pagination">
                <el-pagination
                  v-model:current-page="newsPage"
                  v-model:page-size="newsPageSize"
                  :total="newsTotalCount"
                  :page-sizes="[12, 24, 36, 48]"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleNewsPageSizeChange"
                  @current-change="handleNewsPageChange"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import GlobalCard from "@/components/global/GlobalCard.vue";
import ProductCard from "@/components/global/ProductCard.vue";
import {
  View,
  Star,
  ChatDotRound,
  Calendar,
  Location,
  User,
  Camera,
  Setting,
  Timer,
  Share,
} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";

const router = useRouter();
const activeTab = ref("spots");

dayjs.extend(relativeTime);
dayjs.locale("zh-cn");

// 景点列表数据
const spotsList = ref([]);
const spotsPage = ref(1);
const spotsPageSize = ref(12);
const spotsTotalCount = ref(0);

// 商品列表数据
const productsList = ref([]);
const productsPage = ref(1);
const productsPageSize = ref(12);
const productsTotalCount = ref(0);

// 攻略列表数据
const guidesList = ref([]);
const guidesPage = ref(1);
const guidesPageSize = ref(12);
const guidesTotalCount = ref(0);
const guidesCount = ref(0);

// 文章列表数据
const articlesList = ref([]);
const articlesPage = ref(1);
const articlesPageSize = ref(12);
const articlesTotalCount = ref(0);
const articlesCount = ref(0);

// 其他收藏类型的数据
const topicsCount = ref(0);
const activitiesCount = ref(0);
const postsCount = ref(0);
const photosCount = ref(0);
const hotelsCount = ref(0);
const experiencesCount = ref(0);
const newsCount = ref(0);

// 话题列表数据
const topicsList = ref([]);
const topicsPage = ref(1);
const topicsPageSize = ref(12);
const topicsTotalCount = ref(0);

// 动态列表数据
const postsList = ref([]);
const postsPage = ref(1);
const postsPageSize = ref(12);
const postsTotalCount = ref(0);

// 活动列表数据
const activitiesList = ref([]);
const activitiesPage = ref(1);
const activitiesPageSize = ref(12);
const activitiesTotalCount = ref(0);

// 摄影列表数据
const photosList = ref([]);
const photosPage = ref(1);
const photosPageSize = ref(12);
const photosTotalCount = ref(0);

// 酒店列表数据
const hotelsList = ref([]);
const hotelsPage = ref(1);
const hotelsPageSize = ref(12);
const hotelsTotalCount = ref(0);

// 体验列表数据
const experiencesList = ref([]);
const experiencesPage = ref(1);
const experiencesPageSize = ref(12);
const experiencesTotalCount = ref(0);

// 新闻列表数据
const newsList = ref([]);
const newsPage = ref(1);
const newsPageSize = ref(12);
const newsTotalCount = ref(0);

// 美食列表数据
const foodsList = ref([]);
const foodsPage = ref(1);
const foodsPageSize = ref(12);
const foodsTotalCount = ref(0);
const foodsCount = ref(0);

// 格式化数字
const formatNumber = (num) => {
  return new Intl.NumberFormat().format(num);
};

// 获取景点收藏列表
const getSpotsFavorites = async () => {
  try {
    // TODO: 调用获取景点收藏列表API
    // const { data } = await api.getSpotsFavorites({
    //   page: spotsPage.value,
    //   pageSize: spotsPageSize.value
    // })
    // spotsList.value = data.list
    // spotsTotalCount.value = data.total

    // 模拟数据
    spotsList.value = [
      {
        id: 1,
        name: "贵港江滨公园",
        description: "邕江畔的城市会客厅,是市民休闲娱乐的好去处",
        cover: "/images/spots/spot1.jpg",
        rating: 4.5,
        viewCount: 12345,
      },
      // ... 更多景点数据
    ];
    spotsTotalCount.value = 100;
  } catch (error) {
    console.error("获取景点收藏列表失败:", error);
    ElMessage.error("获取景点收藏列表失败");
  }
};

// 获取商品收藏列表
const getProductsFavorites = async () => {
  try {
    // TODO: 调用获取商品收藏列表API
    // const { data } = await api.getProductsFavorites({
    //   page: productsPage.value,
    //   pageSize: productsPageSize.value
    // })
    // productsList.value = data.list
    // productsTotalCount.value = data.total

    // 模拟数据
    productsList.value = [
      {
        id: 1,
        title: "贵港特色手工艺品",
        description: "传统工艺制作,独具特色的文创产品",
        price: 99,
        originalPrice: 129,
        image: "/images/products/product1.jpg",
        sales: 235,
        rating: 4.7,
        reviewCount: 125,
        tags: ["新品", "热销"],
        isFavorite: true,
      },
      // ... 更多商品数据
    ];
    productsTotalCount.value = 100;
  } catch (error) {
    console.error("获取商品收藏列表失败:", error);
    ElMessage.error("获取商品收藏列表失败");
  }
};

// 获取攻略收藏列表
const getGuidesFavorites = async () => {
  try {
    // TODO: 调用获取攻略收藏列表API
    // 模拟数据
    guidesList.value = [
      {
        id: 1,
        title: "贵港两日游完全攻略",
        description: "带你玩转贵港，打卡必去景点，品尝地道美食...",
        cover: "/images/guides/guide1.jpg",
        category: "spot",
        publishTime: "2024-03-20 10:00:00",
        viewCount: 512,
        favoriteCount: 128,
        commentCount: 64,
      },
    ];
    guidesTotalCount.value = 100;
    guidesCount.value = 5;
  } catch (error) {
    console.error("获取攻略收藏列表失败:", error);
    ElMessage.error("获取攻略收藏列表失败");
  }
};

// 获取文章收藏列表
const getArticlesFavorites = async () => {
  try {
    // TODO: 调用获取文章收藏列表API
    // 模拟数据
    articlesList.value = [
      {
        id: 1,
        title: "探索贵港文化之美",
        description: "深入了解贵港的历史文化底蕴...",
        cover: "/images/articles/article1.jpg",
        category: "culture",
        publishTime: "2024-03-19 15:30:00",
        viewCount: 384,
        favoriteCount: 96,
        commentCount: 48,
      },
    ];
    articlesTotalCount.value = 100;
    articlesCount.value = 3;
  } catch (error) {
    console.error("获取文章收藏列表失败:", error);
    ElMessage.error("获取文章收藏列表失败");
  }
};

// 获取话题收藏列表
const getTopicsFavorites = async () => {
  try {
    // 模拟数据
    topicsList.value = [
      {
        id: 1,
        title: "贵港美食探店",
        description: "分享贵港本地特色美食、网红店铺...",
        cover: "/images/topics/topic1.jpg",
        participantsCount: 1234,
        postsCount: 567,
        isHot: true,
        lastActiveTime: "2024-03-20 10:00:00",
      },
    ];
    topicsTotalCount.value = 50;
    topicsCount.value = 8;
  } catch (error) {
    console.error("获取话题收藏列表失败:", error);
    ElMessage.error("获取话题收藏列表失败");
  }
};

// 获取动态收藏列表
const getPostsFavorites = async () => {
  try {
    // 模拟数据
    postsList.value = [
      {
        id: 1,
        author: {
          id: 1,
          nickname: "贵港吃货",
          avatar: "/images/avatars/user1.jpg",
        },
        content: "今天去打卡了江滨公园，风景真不错！",
        images: ["/images/posts/post1-1.jpg", "/images/posts/post1-2.jpg"],
        likeCount: 128,
        commentCount: 32,
        shareCount: 16,
        publishTime: "2024-03-20 09:30:00",
      },
    ];
    postsTotalCount.value = 80;
    postsCount.value = 12;
  } catch (error) {
    console.error("获取动态收藏列表失败:", error);
    ElMessage.error("获取动态收藏列表失败");
  }
};

// 获取活动收藏列表
const getActivitiesFavorites = async () => {
  try {
    // 模拟数据
    activitiesList.value = [
      {
        id: 1,
        title: "2024贵港美食文化节",
        cover: "/images/activities/activity1.jpg",
        startTime: "2024-04-01 10:00:00",
        endTime: "2024-04-03 22:00:00",
        location: "贵港市文化中心",
        status: "upcoming",
        participantsCount: 500,
        maxParticipants: 1000,
        price: 0,
        tags: ["美食", "文化", "免费"],
      },
    ];
    activitiesTotalCount.value = 30;
    activitiesCount.value = 5;
  } catch (error) {
    console.error("获取活动收藏列表失败:", error);
    ElMessage.error("获取活动收藏列表失败");
  }
};

// 获取摄影收藏列表
const getPhotosFavorites = async () => {
  try {
    // 模拟数据
    photosList.value = [
      {
        id: 1,
        title: "江滨晚霞",
        description: "贵港江滨公园的绝美晚霞",
        imageUrl: "/images/photos/photo1.jpg",
        author: {
          id: 1,
          nickname: "摄影师小王",
          avatar: "/images/avatars/photographer1.jpg",
        },
        camera: "Canon EOS R5",
        settings: "f/2.8, 1/1000s, ISO 100",
        location: "贵港江滨公园",
        likeCount: 256,
        commentCount: 48,
        publishTime: "2024-03-19 18:30:00",
      },
    ];
    photosTotalCount.value = 120;
    photosCount.value = 15;
  } catch (error) {
    console.error("获取摄影收藏列表失败:", error);
    ElMessage.error("获取摄影收藏列表失败");
  }
};

// 获取酒店收藏列表
const getHotelsFavorites = async () => {
  try {
    // 模拟数据
    hotelsList.value = [
      {
        id: 1,
        name: "贵港大酒店",
        cover: "/images/hotels/hotel1.jpg",
        address: "贵港市港北区市中心",
        price: 388,
        rating: 4.5,
        tags: ["商务", "wifi", "停车场"],
        facilities: ["餐厅", "健身房", "会议室"],
        commentCount: 1234,
        bookingCount: 5678,
      },
    ];
    hotelsTotalCount.value = 40;
    hotelsCount.value = 6;
  } catch (error) {
    console.error("获取酒店收藏列表失败:", error);
    ElMessage.error("获取酒店收藏列表失败");
  }
};

// 获取体验收藏列表
const getExperiencesFavorites = async () => {
  try {
    // 模拟数据
    experiencesList.value = [
      {
        id: 1,
        title: "贵港传统手工艺体验",
        cover: "/images/experiences/exp1.jpg",
        duration: "约2小时",
        price: 128,
        rating: 4.8,
        category: "文化体验",
        location: "贵港市非物质文化遗产展示中心",
        maxParticipants: 10,
        bookingCount: 256,
        tags: ["手工艺", "文化", "亲子"],
      },
    ];
    experiencesTotalCount.value = 25;
    experiencesCount.value = 4;
  } catch (error) {
    console.error("获取体验收藏列表失败:", error);
    ElMessage.error("获取体验收藏列表失败");
  }
};

// 获取新闻收藏列表
const getNewsFavorites = async () => {
  try {
    // 模拟数据
    newsList.value = [
      {
        id: 1,
        title: "贵港市举办2024年文化旅游推介会",
        cover: "/images/news/news1.jpg",
        source: "贵港日报",
        category: "本地新闻",
        publishTime: "2024-03-20 08:00:00",
        viewCount: 3456,
        summary: "3月20日，贵港市2024年文化旅游推介会在市民中心成功举办...",
      },
    ];
    newsTotalCount.value = 60;
    newsCount.value = 10;
  } catch (error) {
    console.error("获取新闻收藏列表失败:", error);
    ElMessage.error("获取新闻收藏列表失败");
  }
};

// 获取美食收藏列表
const getFoodsFavorites = async () => {
  try {
    // TODO: 调用获取美食收藏列表API
    // 模拟数据
    foodsList.value = [
      {
        id: 1,
        name: "贵港艇仔粥",
        description:
          "使用新鲜的河鲜熬制，口感鲜美，是贵港最具特色的传统美食之一。",
        image: "/images/food/food1.jpg",
        category: "特色小吃",
        location: "贵港市港北区",
        isRecommended: true,
        views: 15680,
        likes: 2360,
      },
      {
        id: 2,
        name: "荷叶粉",
        description:
          "采用上等大米制作，配以特制酱料，清香可口，是贵港传统风味小吃。",
        image: "/images/food/food2.jpg",
        category: "传统美食",
        location: "贵港市港南区",
        isRecommended: false,
        views: 12460,
        likes: 1890,
      },
    ];
    foodsTotalCount.value = 100;
    foodsCount.value = 8;
  } catch (error) {
    console.error("获取美食收藏列表失败:", error);
    ElMessage.error("获取美食收藏列表失败");
  }
};

// 查看景点详情
const viewSpotDetail = (spot) => {
  router.push(`/spots/${spot.id}`);
};

// 查看攻略详情
const viewGuideDetail = (guide) => {
  router.push(`/guides/${guide.id}`);
};

// 查看文章详情
const viewArticleDetail = (article) => {
  router.push(`/articles/${article.id}`);
};

// 取消收藏
const removeFromFavorites = async (item, type) => {
  try {
    await ElMessageBox.confirm("确定要取消收藏吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    // TODO: 调用取消收藏API
    // await api.removeFavorite({
    //   id: item.id,
    //   type: type
    // })

    ElMessage.success("已取消收藏");

    // 刷新列表
    if (type === "spot") {
      getSpotsFavorites();
    } else if (type === "guide") {
      getGuidesFavorites();
    } else if (type === "article") {
      getArticlesFavorites();
    } else {
      getProductsFavorites();
    }
  } catch (error) {
    if (error === "cancel") return;
    console.error("取消收藏失败:", error);
    ElMessage.error("取消收藏失败");
  }
};

// 加入购物车
const addToCart = async (product) => {
  try {
    // TODO: 调用加入购物车API
    // await api.addToCart({
    //   productId: product.id,
    //   quantity: 1
    // })
    ElMessage.success("已加入购物车");
  } catch (error) {
    console.error("加入购物车失败:", error);
    ElMessage.error("加入购物车失败");
  }
};

// 立即购买
const buyNow = (product) => {
  router.push({
    path: "/order/confirm",
    query: {
      productId: product.id,
      quantity: 1,
    },
  });
};

// 处理景点分页变化
const handleSpotsPageChange = (page) => {
  spotsPage.value = page;
  getSpotsFavorites();
};

const handleSpotsPageSizeChange = (size) => {
  spotsPageSize.value = size;
  spotsPage.value = 1;
  getSpotsFavorites();
};

// 处理商品分页变化
const handleProductsPageChange = (page) => {
  productsPage.value = page;
  getProductsFavorites();
};

const handleProductsPageSizeChange = (size) => {
  productsPageSize.value = size;
  productsPage.value = 1;
  getProductsFavorites();
};

// 处理攻略分页变化
const handleGuidesPageChange = (page) => {
  guidesPage.value = page;
  getGuidesFavorites();
};

const handleGuidesPageSizeChange = (size) => {
  guidesPageSize.value = size;
  guidesPage.value = 1;
  getGuidesFavorites();
};

// 处理文章分页变化
const handleArticlesPageChange = (page) => {
  articlesPage.value = page;
  getArticlesFavorites();
};

const handleArticlesPageSizeChange = (size) => {
  articlesPageSize.value = size;
  articlesPage.value = 1;
  getArticlesFavorites();
};

// 处理话题分页变化
const handleTopicsPageChange = (page) => {
  topicsPage.value = page;
  getTopicsFavorites();
};

const handlePostsPageChange = (page) => {
  postsPage.value = page;
  getPostsFavorites();
};

const handleActivitiesPageChange = (page) => {
  activitiesPage.value = page;
  getActivitiesFavorites();
};

const handlePhotosPageChange = (page) => {
  photosPage.value = page;
  getPhotosFavorites();
};

const handleHotelsPageChange = (page) => {
  hotelsPage.value = page;
  getHotelsFavorites();
};

const handleExperiencesPageChange = (page) => {
  experiencesPage.value = page;
  getExperiencesFavorites();
};

const handleNewsPageChange = (page) => {
  newsPage.value = page;
  getNewsFavorites();
};

// 处理美食分页变化
const handleFoodsPageChange = (page) => {
  foodsPage.value = page;
  getFoodsFavorites();
};

const handleFoodsPageSizeChange = (size) => {
  foodsPageSize.value = size;
  foodsPage.value = 1;
  getFoodsFavorites();
};

// 监听标签页变化
watch(activeTab, (newTab) => {
  if (newTab === "guides") {
    getGuidesFavorites();
  } else if (newTab === "articles") {
    getArticlesFavorites();
  } else if (newTab === "topics") {
    getTopicsFavorites();
  } else if (newTab === "posts") {
    getPostsFavorites();
  } else if (newTab === "activities") {
    getActivitiesFavorites();
  } else if (newTab === "photos") {
    getPhotosFavorites();
  } else if (newTab === "hotels") {
    getHotelsFavorites();
  } else if (newTab === "experiences") {
    getExperiencesFavorites();
  } else if (newTab === "news") {
    getNewsFavorites();
  } else if (newTab === "foods") {
    getFoodsFavorites();
  }
});

// 页面加载时获取数据
onMounted(() => {
  getSpotsFavorites();
  getProductsFavorites();
  getGuidesFavorites();
  getArticlesFavorites();
  getTopicsFavorites();
  getPostsFavorites();
  getActivitiesFavorites();
  getPhotosFavorites();
  getHotelsFavorites();
  getExperiencesFavorites();
  getNewsFavorites();
  getFoodsFavorites();
});

// 获取攻略分类文本
const getCategoryText = (category) => {
  const categoryMap = {
    spot: "景点游玩",
    food: "美食探店",
    hotel: "住宿推荐",
    transport: "交通出行",
    shopping: "购物指南",
    culture: "文化体验",
  };
  return categoryMap[category] || category;
};

// 获取文章标签类型
const getArticleTagType = (category) => {
  const typeMap = {
    culture: "success",
    news: "info",
    guide: "warning",
    story: "danger",
  };
  return typeMap[category] || "info";
};

// 获取文章分类文本
const getArticleCategoryText = (category) => {
  const categoryMap = {
    culture: "文化",
    news: "新闻",
    guide: "攻略",
    story: "故事",
  };
  return categoryMap[category] || category;
};

// 获取日期格式
const formatDate = (dateStr) => {
  const date = new Date(dateStr);
  return date.toLocaleDateString();
};

// 获取相对时间格式
const formatTime = (dateStr) => {
  return dayjs(dateStr).fromNow();
};

// 获取活动状态标签
const getActivityStatusTag = (status) => {
  const statusMap = {
    upcoming: { type: "warning", text: "即将开始" },
    ongoing: { type: "success", text: "进行中" },
    ended: { type: "info", text: "已结束" },
  };
  return statusMap[status] || { type: "info", text: status };
};

// 查看美食详情
const viewFoodDetail = (food) => {
  router.push(`/food/${food.id}`);
};

// 查看话题详情
const viewTopicDetail = (topic) => {
  router.push(`/community/topics/${topic.id}`);
};

// 查看动态详情
const viewPostDetail = (post) => {
  router.push(`/community/posts/${post.id}`);
};

// 查看摄影详情
const viewPhotoDetail = (photo) => {
  router.push(`/photography/${photo.id}`);
};

// 查看酒店详情
const viewHotelDetail = (hotel) => {
  router.push(`/hotels/${hotel.id}`);
};

// 查看体验详情
const viewExperienceDetail = (experience) => {
  router.push(`/experiences/${experience.id}`);
};

// 查看新闻详情
const viewNewsDetail = (news) => {
  router.push(`/news/${news.id}`);
};

// 查看活动详情
const viewActivityDetail = (activity) => {
  router.push(`/activities/${activity.id}`);
};
</script>

<style lang="scss" scoped>
.favorites-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300;

  .favorites-tabs {
    :deep(.el-tabs__header) {
      @apply mb-6;
      border-bottom: 1px solid var(--el-border-color-light);

      .el-tabs__nav-wrap::after {
        @apply bg-transparent;
      }

      .el-tabs__item {
        @apply text-gray-600 dark:text-gray-400 transition-colors duration-300;

        &.is-active {
          @apply text-primary-600 dark:text-primary-400;
        }

        &:hover:not(.is-active) {
          @apply text-primary-500 dark:text-primary-300;
        }
      }
    }
  }

  .spots-grid,
  .guides-grid,
  .articles-grid,
  .foods-grid,
  .products-grid,
  .topics-grid,
  .posts-grid,
  .activities-grid,
  .photos-grid,
  .hotels-grid,
  .experiences-grid,
  .news-grid {
    @apply grid gap-6 px-6;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    @media (max-width: 1280px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .spot-card,
  .guide-card,
  .article-card,
  .food-card,
  .product-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

    &:hover {
      @apply shadow-md transform scale-[1.02];
    }

    .spot-image,
    .guide-image,
    .article-image,
    .food-image,
    .product-image {
      @apply relative aspect-[4/3] overflow-hidden;

      img {
        @apply w-full h-full object-cover transition-transform duration-300;
      }

      &:hover img {
        @apply scale-110;
      }
    }

    .spot-info,
    .guide-info,
    .article-info,
    .food-info,
    .product-info {
      @apply p-4;

      h3 {
        @apply text-lg font-medium text-gray-900 dark:text-white mb-2 line-clamp-1;
      }

      p {
        @apply text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2;
      }
    }
  }

  .pagination {
    @apply mt-8 flex justify-center pb-6;

    :deep(.el-pagination) {
      @apply bg-white dark:bg-gray-800 p-4 rounded-lg shadow transition-colors duration-300;

      .el-pagination__total {
        @apply text-gray-600 dark:text-gray-400;
      }

      .el-pagination__jump {
        @apply text-gray-600 dark:text-gray-400;
      }

      .el-input__inner {
        @apply bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600;
      }

      button {
        @apply bg-transparent border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400;

        &:disabled {
          @apply bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600;
        }

        &:hover:not(:disabled) {
          @apply bg-gray-100 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
        }
      }

      .el-pager li {
        @apply bg-transparent border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400;

        &.active {
          @apply bg-primary-500 dark:bg-primary-600 text-white border-primary-500 dark:border-primary-600;
        }

        &:hover:not(.active) {
          @apply bg-gray-100 dark:bg-gray-700 text-primary-600 dark:text-primary-400;
        }
      }
    }
  }

  .topics-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .topic-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .topic-actions {
          @apply opacity-100;
        }

        .topic-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .topic-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }

        .topic-actions {
          @apply absolute inset-0 flex items-center justify-center space-x-4 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300;
        }
      }

      .topic-info {
        @apply p-4;

        .topic-header {
          @apply flex items-center justify-between mb-2;
        }

        .topic-title {
          @apply text-lg font-medium text-gray-900 dark:text-white;
        }

        .topic-description {
          @apply text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2;
        }

        .topic-stats {
          @apply flex items-center space-x-4;

          .stat-item {
            @apply flex items-center text-sm text-gray-500 dark:text-gray-400;

            .el-icon {
              @apply mr-1;
            }
          }
        }

        .topic-actions {
          @apply flex items-center justify-end space-x-2;
        }
      }
    }
  }

  .posts-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .post-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .post-actions {
          @apply opacity-100;
        }

        .post-content :deep(img) {
          @apply transform scale-110;
        }
      }

      .post-header {
        @apply flex items-center justify-between p-4;
      }

      .post-author {
        @apply flex items-center;
      }

      .author-info {
        @apply ml-2;
      }

      .post-content {
        @apply p-4;
      }

      .post-text {
        @apply text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2;
      }

      .post-images {
        @apply flex items-center space-x-4;
      }

      .post-footer {
        @apply p-4;

        .post-stats {
          @apply flex items-center space-x-6 border-b border-gray-100 dark:border-gray-700 pb-4;

          .stat-item {
            @apply flex items-center text-sm text-gray-500 dark:text-gray-400;

            .el-icon {
              @apply mr-2;
            }
          }
        }

        .post-actions {
          @apply flex items-center justify-end space-x-2 pt-4;

          :deep(.el-button) {
            @apply transition-all duration-300;

            &:hover {
              @apply transform scale-105;
            }
          }
        }
      }
    }
  }

  .photos-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .photo-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .photo-actions {
          @apply opacity-100;
        }

        .photo-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .photo-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }

        .photo-actions {
          @apply absolute inset-0 flex items-center justify-center space-x-4 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300;
        }
      }

      .photo-info {
        @apply p-4;

        .photo-header {
          @apply flex items-center justify-between mb-2;
        }

        .photo-title {
          @apply text-lg font-medium text-gray-900 dark:text-white;
        }

        .photo-author {
          @apply flex items-center;
        }

        .photo-description {
          @apply text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2;
        }

        .photo-meta {
          @apply flex items-center space-x-4;
        }

        .photo-stats {
          @apply flex items-center space-x-4;
        }

        .photo-actions {
          @apply flex items-center justify-end space-x-2;
        }
      }
    }
  }

  .hotels-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .hotel-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .hotel-actions {
          @apply opacity-100;
        }

        .hotel-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .hotel-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }
      }

      .hotel-info {
        @apply p-4;

        .hotel-name {
          @apply text-lg font-medium text-gray-900 dark:text-white mb-2;
        }

        .hotel-rating {
          @apply mb-2;
        }

        .hotel-location {
          @apply flex items-center text-sm text-gray-500 dark:text-gray-400;
        }

        .hotel-tags {
          @apply flex items-center space-x-2;
        }

        .hotel-facilities {
          @apply flex items-center space-x-2;
        }

        .hotel-stats {
          @apply flex items-center space-x-4;
        }

        .hotel-price {
          @apply flex items-center space-x-4;
        }

        .hotel-actions {
          @apply flex items-center justify-end space-x-2;
        }
      }
    }
  }

  .news-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .news-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .news-actions {
          @apply opacity-100;
        }

        .news-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .news-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }
      }

      .news-info {
        @apply p-4;

        .news-meta {
          @apply flex items-center justify-between mb-2;
        }

        .news-title {
          @apply text-lg font-medium text-gray-900 dark:text-white mb-2;
        }

        .news-summary {
          @apply text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2;
        }

        .news-stats {
          @apply flex items-center space-x-4;
        }

        .news-actions {
          @apply flex items-center justify-end space-x-2;
        }
      }
    }
  }

  .activities-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .activity-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .activity-actions {
          @apply opacity-100;
        }

        .activity-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .activity-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }

        .activity-status {
          @apply absolute top-4 right-4;
        }
      }

      .activity-info {
        @apply p-4;

        .activity-title {
          @apply text-lg font-medium text-gray-900 dark:text-white mb-4;
        }

        .activity-meta {
          @apply space-y-2 mb-4;

          .meta-item {
            @apply flex items-center text-sm text-gray-600 dark:text-gray-400;

            .el-icon {
              @apply mr-2;
            }
          }
        }

        .activity-tags {
          @apply flex flex-wrap gap-2 mb-4;
        }

        .activity-price {
          @apply mb-4;

          .free {
            @apply text-green-500 font-medium;
          }
        }

        .activity-actions {
          @apply flex items-center justify-end space-x-2;
        }
      }
    }
  }

  .experiences-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .experience-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .experience-actions {
          @apply opacity-100;
        }

        .experience-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .experience-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }
      }

      .experience-info {
        @apply p-4;

        .experience-header {
          @apply flex items-center justify-between mb-4;

          .experience-title {
            @apply text-lg font-medium text-gray-900 dark:text-white;
          }
        }

        .experience-meta {
          @apply space-y-2 mb-4;

          .meta-item {
            @apply flex items-center text-sm text-gray-600 dark:text-gray-400;

            .el-icon {
              @apply mr-2;
            }
          }
        }

        .experience-rating {
          @apply flex items-center space-x-4 mb-4;

          .booking-count {
            @apply text-sm text-gray-500 dark:text-gray-400;
          }
        }
      }

      .experience-tags {
        @apply flex flex-wrap gap-2 mb-4;
      }

      .experience-price {
        @apply mb-4;

        .price-value {
          @apply text-xl font-medium text-primary-600 dark:text-primary-400;
        }

        .price-label {
          @apply text-sm text-gray-500 dark:text-gray-400 ml-1;
        }
      }

      .experience-actions {
        @apply flex items-center justify-end space-x-2;
      }
    }
  }

  .foods-grid {
    // 删除独立的网格定义，使用统一的网格样式
    .food-card {
      @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-all duration-300;

      &:hover {
        @apply shadow-lg transform -translate-y-1;

        .food-image :deep(img) {
          @apply transform scale-110;
        }
      }

      .food-image {
        @apply relative h-48 overflow-hidden;

        :deep(.el-image) {
          @apply w-full h-full;

          img {
            @apply w-full h-full object-cover transition-transform duration-500;
          }
        }
      }

      .food-info {
        @apply p-4;

        .food-meta {
          @apply flex items-center justify-between mb-2;

          .category {
            @apply text-sm text-gray-600 dark:text-gray-400;
          }
        }

        .food-name {
          @apply text-lg font-medium text-gray-900 dark:text-white mb-2;
        }

        .food-description {
          @apply text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2;
        }

        .food-footer {
          @apply flex items-center justify-between mb-4;

          .food-location {
            @apply flex items-center text-sm text-gray-500 dark:text-gray-400;
          }

          .food-stats {
            @apply flex items-center space-x-4;

            .stat-item {
              @apply flex items-center text-sm text-gray-500 dark:text-gray-400;

              .el-icon {
                @apply mr-1;
              }
            }
          }
        }

        .food-actions {
          @apply flex items-center justify-end space-x-2;

          :deep(.el-button) {
            @apply transition-all duration-300;

            &:hover {
              @apply transform scale-105;
            }
          }
        }
      }
    }
  }
}

// 添加列表项动画
.spot-card,
:deep(.product-card) {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 为每个项目添加延迟动画
@for $i from 1 through 12 {
  .spot-card:nth-child(#{$i}),
  :deep(.product-card:nth-child(#{$i})) {
    animation-delay: #{$i * 0.1}s;
  }
}

// 添加列表项动画
.topic-card,
.post-card,
.activity-card,
.photo-card,
.hotel-card,
.experience-card,
.news-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

// 为每个项目添加延迟动画
@for $i from 1 through 12 {
  .topic-card:nth-child(#{$i}),
  .post-card:nth-child(#{$i}),
  .activity-card:nth-child(#{$i}),
  .photo-card:nth-child(#{$i}),
  .hotel-card:nth-child(#{$i}),
  .experience-card:nth-child(#{$i}),
  .news-card:nth-child(#{$i}) {
    animation-delay: #{$i * 0.1}s;
  }
}
</style>
